import { defineNuxtPlugin } from "nuxt/app";
import {
    createDiscreteApi,
} from 'naive-ui'

export default defineNuxtPlugin(nuxtApp => {
    const bar = ref(null)

    nuxtApp.hook("app:mounted", ()=>{
        console.log("app:mounted >>>>>>>>>>>>>>>> 创建初始vueApp实例时调用")
        if(!bar.value){
            const { loadingBar } = createDiscreteApi(['loadingBar'])
            bar.value = loadingBar
        }
    })
    nuxtApp.hook("page:start", ()=>{
        console.log("page:start >>>>>>>>>>>>>>>> 页面开始加载时调用")
        bar.value?.start()
    })

    nuxtApp.hook("page:finish", ()=>{
        console.log("page:finish >>>>>>>>>>>>>>>> 页面加载结束时调用")
        setTimeout(()=>{
            bar.value?.finish()
        })

    })
    nuxtApp.hook("app:error", ()=>{
        console.log("app:error >>>>>>>>>>>>>>>> 发生致命错误时调用")
        // 如果是客户端 // process.server 服务端
        if(process.client){
            setTimeout(()=>{
                bar.value?.finish()
            })
        }
    })
})